<template>
  <page title="宿舍资料">
    <el-row class="header-title">
      <el-button type="primary" @click="addDormitory">新增宿舍</el-button>
    </el-row>
    <el-table :data="tableData" header-cell-class-name="table-header">
      <el-table-column
          prop="build.name"
          label="楼栋名">
      </el-table-column>
      <el-table-column
          label="操作">
        <template #default="scope">
          <el-button
              type="text"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              type="text"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </page>
  <el-dialog title="新增教室" v-model="visible" width="35%">
    <el-form label-position="top">
      <el-form-item label="楼栋名">
        <el-row>
          <el-col :span="12">
            <el-input v-model="form.build.name"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="房间配置">
        <el-table :data="form.dormitory" border header-cell-class-name="table-header">
          <el-table-column
              prop="roomType.name"
              header-align="center"
              align="center"
              :resizable="false"
              label="房型">
          </el-table-column>
          <el-table-column
              prop="amount"
              header-align="center"
              align="center"
              :resizable="false"
              label="总数量（间）">
            <template v-slot:default="scope">
              <edit-text v-model="scope.row.amount"></edit-text>
            </template>
          </el-table-column>
          <el-table-column
              prop="fullPrice"
              header-align="center"
              align="center"
              :resizable="false"
              label="全日房标价（元/天）">
            <template v-slot:default="scope">
              <edit-text v-model="scope.row.fullPrice"></edit-text>
            </template>
          </el-table-column>
          <el-table-column
              prop="hourPrice"
              header-align="center"
              align="center"
              :resizable="false"
              label="钟点房标价（元/4小时）">
            <template v-slot:default="scope">
              <edit-text v-model="scope.row.hourPrice"></edit-text>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit">保 存</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import Page from "@/components/Page";
import EditText from "@/components/EditText";
import axios from "axios";
export default {
  name: "DormitoryData",
  components: {EditText, Page},
  data(){
    return{
      tableData:[],

      roomType:[],

      visible:false,
      edit:false,
      form:{
        build:{
          id:0,
          name:'',
        },
        dormitory:[{
          roomType:{},
          amount:'',
          fullPrice:'',
          hourPrice:'',
        }]
      }
    }
  },
  methods:{
    findAllDormitory(){
      return  axios.get(this.$host+"/build/info").then(response =>{
        if(response.data.code === 0){
          this.tableData = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    findAllRoomType(){
      return axios.get(this.$host+"/build/roomtype").then(response=>{
        if(response.data.code === 0){
          this.roomType = response.data.data;
        }
      })
    },
    updateDormitory(data){
      return axios.put(this.$host+"/build/info",data).then(response =>{
        if(response.data.code === 0){
          this.$message.success("修改完成");
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    insertDormitory(data){
      console.log(data);
      return axios.post(this.$host+"/build/info",data).then(response =>{
        if(response.data.code === 0){
          this.$message.success("添加完成");
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    deleteDormitory(buildId){
      return axios.delete(this.$host+"/build/info/"+buildId).then(response =>{
        if(response.data.code === 0){
          this.$message.success("删除完成");
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    handleEdit(index,row){
      console.log(index,row);
      this.form = row;
      this.edit = true;
      this.visible = true;
    },
    handleDelete(index,row){
      console.log(index);
      this.$confirm('确认删除此楼栋?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteDormitory(row.build.id).then(()=>{this.findAllDormitory()});
      });
    },
    addDormitory(){
      let dormitory = [];
      this.form = {build: {},dormitory: []};
      this.roomType.forEach((value)=>{
        dormitory.push({
          roomType:value,
          amount:'',
          fullPrice:'',
          hourPrice:''
        })
      })
      this.form.dormitory = dormitory;
      this.edit = false;
      this.visible = true;
    },
    submit(){
      if(this.edit){
        this.updateDormitory(this.form).then(()=>{this.findAllDormitory()});
      }else{
        this.insertDormitory(this.form).then(()=>{this.findAllDormitory()});
      }
      this.visible = false;
      this.build.id = 0;
      this.build.name = '';
    }
  },
  created() {
    this.findAllRoomType();
    this.findAllDormitory();
  }
}
</script>

<style scoped>

</style>